import { html } from './html.js';
import { styles } from './styles.js';
import { initializeMessageToast } from './scripts.js';

class MessageToast extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.render();
        this.init();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>${styles}</style>
            ${html}
        `;
    }

    init() {
        initializeMessageToast(this.shadowRoot, this);
    }

    // 组件连接到 DOM 时调用
    connectedCallback() {
        // 可以在这里添加额外的初始化逻辑
    }

    // 组件从 DOM 断开时调用
    disconnectedCallback() {
        // 清理工作
        if (this.currentTimeout) {
            clearTimeout(this.currentTimeout);
        }
    }

    // 监听属性变化
    static get observedAttributes() {
        return ['type', 'message', 'title', 'duration', 'closable'];
    }

    // 属性变化时调用
    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            this.handleAttributeChange(name, newValue);
        }
    }

    handleAttributeChange(name, value) {
        if (!this.shadowRoot) return;

        switch (name) {
            case 'type':
                this.updateType(value);
                break;
            case 'message':
                this.updateMessage(value);
                break;
            case 'title':
                this.updateTitle(value);
                break;
            case 'duration':
                this.updateDuration(parseInt(value) || 5000);
                break;
            case 'closable':
                this.updateClosable(value === 'true');
                break;
        }
    }

    updateType(type) {
        const toast = this.shadowRoot.querySelector('#messageToast');
        if (toast) {
            toast.className = 'message-toast';
            if (type) {
                toast.classList.add(type);
            }
        }
    }

    updateMessage(message) {
        const messageEl = this.shadowRoot.querySelector('#toastMessage');
        if (messageEl) {
            messageEl.textContent = message || '';
        }
    }

    updateTitle(title) {
        const titleEl = this.shadowRoot.querySelector('#toastTitle');
        if (titleEl) {
            titleEl.textContent = title || '';
        }
    }

    updateDuration(duration) {
        this.duration = duration;
    }

    updateClosable(closable) {
        const closeBtn = this.shadowRoot.querySelector('#toastClose');
        if (closeBtn) {
            closeBtn.style.display = closable ? 'flex' : 'none';
        }
    }

    // 公共 API 方法
    show(options = {}) {
        if (this.show) {
            return this.show(options);
        }
        return this;
    }

    hide() {
        if (this.hide) {
            return this.hide();
        }
        return this;
    }

    success(message, options = {}) {
        if (this.success) {
            return this.success(message, options);
        }
        return this;
    }

    warning(message, options = {}) {
        if (this.warning) {
            return this.warning(message, options);
        }
        return this;
    }

    error(message, options = {}) {
        if (this.error) {
            return this.error(message, options);
        }
        return this;
    }

    info(message, options = {}) {
        if (this.info) {
            return this.info(message, options);
        }
        return this;
    }
}

// 注册自定义元素
if (!customElements.get('message-toast')) {
    customElements.define('message-toast', MessageToast);
}

export default MessageToast;